<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="关联菜品" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view class="p-[10px]">
      <wd-text text="以下为“标准糖”关联的菜品" size="14px" />
    </view>
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden px-[10px]"
      :show-scrollbar="false"
    >
      <wd-cell title="鱼香肉丝" class="rounded-lg">
        <wd-icon name="delete" color="#666" size="16" />
      </wd-cell>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="text">
        <view class="flex flex-col items-center justify-center">
          <view class="i-icon-park-outline-unlink text-main" />
          <text class="mt-1 text-[10px] text-main leading-none">批量解除</text>
        </view>
      </wd-button>
      <wd-button type="text" class="ml-4">
        <view class="flex flex-col items-center justify-center">
          <view class="i-icon-park-outline-plus text-main" />
          <text class="mt-1 text-[10px] text-main leading-none">添加菜品</text>
        </view>
      </wd-button>
      <wd-button type="primary" :round="false" class="ml-4 flex-1">确定</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
